<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/reset1.css">
    <link rel="stylesheet" href="css/sidebar.css">
    <link rel="stylesheet" href="css/mycss01.css">
    <link rel="stylesheet" href="css/mycss03.css">
    <link rel="stylesheet" href="css/right-nav.css">
    <link rel="stylesheet" href="css/footer.css">
</head>
<body>

<!--右边栏-->
<div class="sidebar">
    <div class="border">
        <li class="member">
            <i></i>
            <a href="javascript:">国美会员</a>
        </li>
    </div>
    <div class="cart">
        <li class="vehicle">
            <i></i>
            <a href="html/cart.html">购物车</a>
        </li>
        <div class="cart-tip">
            <a href="html/cart.html">购物车</a>
            中还没有商品，赶快选购吧！
        </div>
    </div>
    <div class="collect">
        <div class="collect-box">
            <i></i>
            <a href="javascript:">我的收藏</a>
        </div>
    </div>
    <div class="scan">
        <li>
            <i></i>
            <img src="img/T1LJVvB7KT1RCvBVdK.jpg" alt="">
            <a href="javascript:"></a>
        </li>
        <div class="scan-top">
            <i></i>
            <a href="javascript:">首页反馈</a>
        </div>
        <div class="scan-bot">
            <i></i>
            <a href="javascript:">在线客服</a>
        </div>

        <a href="javascript:;"class="backtotop" id="backtotop">回到<br>顶部</a>

    </div>
</div>
<!--导航栏-->
<div class="nav">
    <div class="nav-nav">
    <div class="nav-left">
        <ul>
            <li class="tiger">
                <a href="index.html">
                    <p></p>
                国美
                </a>
            </li>
            <li class="xian"></li>
            <li class="guomei"> <a href="html/login.html">国美会员
            <div class="guomei-membre">
                <div id="guomei-membre-top">
                    <div></div>
                    <p>
                        欢迎来到国美
                        <a class="zi" href="#">请登录！</a>
                    </p>
                </div>
                <div id="guomei-membre-bottom">
                    <img src="img/GM.png" alt="">
                </div>
            </div>
            </a>
            </li>
            <li> <a href="html/login.html">登录  </a></li>
            <li> <a href="html/register.html">注册 </a></li>
           <li><a href="#" name="username" class="username">asdfghjkl1</a></li>
            <!-- 可以在a链接里面写javascript代码，在href属性中以javascript:开头，后面写js代码 -->
           <li> <a href="javascript:localStorage.clear(); location.reload();" class="logout">退出</a></li>
        </ul>

    </div>
    <div class="nav-right">
        <ul>
            <li> <a href="javascript:">我的订单  </a></li>
            <li class="my"> <a href="javascript:">我的国美
            <div class="my-mei">
                <div class="my-mei-top">
                    <p>我的国美，<i >请登录!</i></p>
                    <div>待处理订单<span> 我的收藏</span></div>
                    <div>我的金融<span> 个人资料</span></div>
                </div>
                <div class="my-mei-bottom">
                    <ul>
                        <li href="javascript:">红卷</li>
                        <li class="shuguang" href="javascript:"></li>
                        <li href="javascript:">蓝卷</li>
                        <li class="shuguang" href="javascript:"></li>
                        <li href="javascript:">店铺卷</li>
                        <li class="shuguang" href="javascript:"></li>
                        <li href="javascript:">购物卷</li>
                    </ul>
                </div>
            </div>
            </a></li>
            <li> <a href="javascript:">企业采购  </a></li>
            <li class="servir-servir"> <a href="javascript:">服务中心
                <div class="servir">
                    <h3>售后服务</h3>
                    <div>物流与配送 <span>上门安装</span> <span>退换货服务</span></div>
                    <div>手机维修 &nbsp;&nbsp;&nbsp;<span>延保服务</span> <span>家电回收</span></div>
                    <h3>帮助问题</h3>
                    <div>焦点问题 <span>账户安全</span> <span>签收与验货</span></div>
                    <div>分期付款 <span>退款说明</span> <span>优惠券说明</span></div>
                    <p>在线客服</p>
                </div>
            </a></li>
            <li class="qiye"> <a href="javascript:">企业导航
            <div class="entreprise">
                <dl>
                    <dt>主题促销</dt>
                    <dd>真划算 <span>家电城</span> <span>智能家居</span></dd>
                    <dd>抢购 <span>家装馆</span> <span>国美超市</span></dd>
                    <dd>海外购 <span>服饰城</span> <span>新品抢先</span></dd>
                    <dd>品牌街 <span>今日特卖</span></dd>
                    <dd></dd>
                </dl>

                <dl>
                    <dt> 特色分类</dt>
                    <dd>电视影音 <span>手机</span> <span>住宅家具</span> <span>服饰鞋帽</span> <span>食品酒水</span></dd>
                    <dd>冰洗 <span>数码</span> <span>家装建材</span> <span>运动户外</span> <span>医疗保健</span></dd>
                    <dd>洗衣机 <span>电脑办公</span> <span>家居日用</span> <span>箱包奢品</span> <span>母婴玩具</span></dd>
                    <dd>空调 <span>精品配件</span> <span>床品家纺</span> <span>表首饰</span> <span>美妆个护</span></dd>
                    <dd>厨卫生活 <span>汽车</span> <span>黄金收藏</span> <span>文化艺术</span> <span>家装频道</span></dd>
                </dl>
                <dl class="char">
                    <dt>便捷服务</dt>
                    <dd>话费充值 <span>流量充值</span></dd>
                    <dd>游戏点卡 <span>酒店</span></dd>
                    <dd>机票 <span>火车票</span></dd>
                    <dd>电影票 <span>演出票</span></dd>
                    <dd>美盈宝 <span>投金宝</span></dd>
                    <dd>定期理财 <span>票据理财</span></dd>
                    <dd>转让理财 <span> 转让理财</span></dd>
                </dl>
                <dl>
                    <dt>更多热点</dt>
                    <dd>商家入驻</dd>
                    <dd>企业采购</dd>
                </dl>
                <dl>
                    <dt>国美旗下</dt>
                    <dd>多边金都</dd>
                    <dd>国美家装</dd>
                    <dd>国美管家</dd>
                </dl>
            </div>
            </a></li>
            <li class="code"> <a href="javascript:">手机国美
                 <div class="portable-code">
                  <i></i>
                 </div>
            </a>
            </li>
        </ul>
    </div>
</div>
</div>
<!--搜索栏-->
<div class="helloworld">
    <div class="logo">
        <a href="index.html"></a>
    </div>
   <div class="helloworld-center">
       <div class="center-center">
           <span>商品</span><i></i>
           <ul>
               <li>商品</li>
               <li>店铺</li>
               <li>话题</li>
               <li>圈子</li>
           </ul>
       </div>
       <div class="helloworld-from">
           <input type="text" id="search" placeholder="请输入想要输入的内容">
           <button id="helloworld" type="button">搜索</button>
       </div>
   </div>
    <div class="shopping">
        <span class="shopping-one">0</span></a>
        <a href="html/cart.html"></a>
        <span class="shopping-two">购物车空了</span>
        <b></b>
        <div class="shopping-box">
            <p>购物车 <span>中还没有商品，赶紧选购</span></p>
        </div>

    </div>
</div>
<!--分类导航-->
<div class="classer">
<div class="classer-center">
<div class="classer-left">
    <h3>全部商品分类</h3>
</div>
    <div class="classer-center-center">
 <ul id="guomeis"></ul>
    </div>
    <div class="classer-right">
        <marquee direction="up" scrollamount="5">
            <h3>生活家电 <span>最高省600</span></h3>
            <h3>空调减满 <span>最高省200</span></h3>
            <h3>家居家装节 <span>2件八折</span></h3>
        </marquee>
    </div>
</div>
</div>
<!--轮播图-->
<div class="banner">
            <div class="left-nav">
                <ul class="nav-box">
                    <li>
                        <div class="catalog">
                            <a class="color colors" href="javascript:">手机</a>
                            <a class="color colors"href="javascript:">充值</a>
                            <a class="color colors" href="javascript:">相机</a>
                            <a class="color colors" href="javascript:">智能数码</a>
                            <div class="category">
                                <div class="category-left">
                                    <div class=" title">
                                        <ul>
                                            <li class="first">潮3C &nbsp;></li>
                                            <li>手机 &nbsp;></li>
                                            <li>数码 &nbsp;></li>
                                            <li>以旧换新 &nbsp;></li>
                                            <li>手机充值 &nbsp;></li>
                                            <li>美通卡 &nbsp;></li>
                                            <li>延保服务 &nbsp;></li>
                                            <li>办公生活 &nbsp;></li>
                                            <li>智享生活 &nbsp;></li>
                                        </ul>
                                    </div>
                                    <ul class="content">
                                        <li>手机通讯</li>
                                        <li>运行商</li>
                                        <li>手机配件</li>
                                        <li>摄影摄像</li>
                                        <li>摄照配件</li>
                                        <li>智能设备</li>
                                        <li>视听娱乐</li>
                                        <li>电子教育</li>
                                        <li>充话费</li>
                                        <li>充流量</li>
                                    </ul>
                                    <ul class="list">
                                        <li>
                                            <p class="firsts">手机</p>
                                            <p>对讲机</p>
                                            <p>iPhone</p>
                                            <p>华为</p>
                                            <p>小米</p>
                                            <p>三星</p>
                                            <p>oppo</p>
                                            <p>vivo</p>
                                        </li>
                                        <li>
                                            <p class="firsts">中国移动</p>
                                            <p>中国电信</p>
                                            <p>3G上网卡</p>
                                            <p>中国联通</p>
                                        </li>
                                        <li>
                                            <p class="firsts">移动电源</p>
                                            <p>蓝牙耳机</p>
                                            <p>有线耳机</p>
                                            <p>保护套</p>
                                            <p>贴膜</p>
                                            <p>手机电池</p>
                                            <p>智能手环</p>
                                            <p>其他配件</p>
                                        </li>
                                        <li>
                                            <p class="firsts">数码相机</p>
                                            <p>单反相机</p>
                                            <p>微单相机</p>
                                            <p>摄像机</p>
                                            <p>拍立得</p>
                                        </li>
                                        <li>
                                            <p class="firsts">存储卡</p>
                                            <p>单反镜头</p>
                                            <p>单反配件</p>
                                            <p>电池</p>
                                            <p>清洁用品</p>
                                            <p>三脚架</p>
                                            <p>滤镜</p>
                                        </li>
                                        <li>
                                            <p class="firsts">智能手表</p>
                                            <p>智能手环</p>
                                            <p>VR眼镜</p>
                                            <p>智能家居</p>
                                            <p>健康监测</p>
                                            <p>无人机</p>
                                            <p>智能配饰</p>
                                        </li>
                                        <li>
                                            <p class="firsts">耳机</p>
                                            <p>音响</p>
                                            <p>MP3/MP4</p>
                                            <p>录音机</p>
                                        </li>
                                        <li>
                                            <p class="firsts">电子书</p>
                                            <p>电子词典</p>
                                            <p>录音笔</p>
                                            <p>学生平板</p>
                                            <p>复读机</p>
                                        </li>
                                        <li>
                                            <p class="firsts">移动/联通</p>
                                        </li>
                                        <li>
                                            <p class="firsts">联通/电信</p>
                                        </li>
                                    </ul>
                                </div>
                                <div class="category-right">
                                    <div class="logo">
                                        <ul>
                                            <li><img src="img/华为-手机.jpg"></li>
                                            <li><img src="img/apple.jpg"></li>
                                            <li><img src="img/三星手机.jpg"></li>
                                            <li><img src="img/xiaomi.jpg"></li>
                                            <li><img src="img/caono.jpg"></li>
                                            <li><img src="img/360.jpg"></li>
                                            <li><img src="img/huafei.jpg"></li>
                                            <li><img src="img/liuliang.jpg"></li>
                                        </ul>
                                    </div>
                                    <div class="sale">
                                        <img src="img/数码.jpg">
                                    </div>
                                </div>
                            </div>
                        </div>

                    </li>
                    <li>
                        <div class="catalog">
                            <a class="color colors" href="javascript:">电脑</a>
                            <a class="color colors" href="javascript:">办公配件</a>
                            <div class="category">
                                <div class="category-left">
                                    <div class=" title">
                                        <ul>
                                            <li class="first">潮3C &nbsp;></li>
                                            <li>电脑办公 &nbsp;></li>
                                            <li>精品配件 &nbsp;></li>
                                            <li>美通卡 &nbsp;></li>
                                            <li>延保服务 &nbsp;></li>
                                            <li>办公生活 &nbsp;></li>
                                        </ul>
                                    </div>
                                    <ul class="content">
                                        <li>电脑整机</li>
                                        <li>外设商品</li>
                                        <li>网络设备</li>
                                        <li>办公打印</li>
                                        <li>办公文仪</li>
                                        <li>苹果配件</li>
                                        <li>电脑配件</li>
                                        <li>增值产品</li>
                                    </ul>
                                    <ul class="list">
                                        <li>
                                            <p class="firsts">笔记本</p>
                                            <p>游戏本</p>
                                            <p>平板电脑</p>
                                            <p>台式电脑</p>
                                            <p>一体机</p>
                                            <p>笔记本配件</p>
                                            <p>服务器</p>
                                        </li>
                                        <li>
                                            <p class="firsts">移动硬盘</p>
                                            <p>鼠标</p>
                                            <p>鼠标垫</p>
                                            <p>U盘</p>
                                            <p>散热垫</p>
                                            <p>耳机</p>
                                            <p>麦克风</p>
                                        </li>
                                        <li>
                                            <p class="firsts">路由器</p>
                                            <p>网卡</p>
                                            <p>交换机</p>
                                            <p>网络电视</p>
                                        </li>
                                        <li>
                                            <p class="firsts">打印机</p>
                                            <p>一体机</p>
                                            <p>投影机</p>
                                            <p>投影配件</p>
                                            <p>传真机</p>
                                            <p>复印机</p>
                                            <p>碎纸机</p>
                                            <p>扫描仪</p>
                                        </li>
                                        <li>
                                            <p class="firsts">保险箱</p>
                                            <p>电话机</p>
                                            <p>支付设备</p>
                                            <p>点钞机</p>
                                            <p>计算器</p>
                                            <p>激光笔</p>
                                            <p>白板</p>
                                        </li>
                                        <li>
                                            <p class="firsts">保护套</p>
                                            <p>保护膜</p>
                                            <p>背壳</p>
                                            <p>连接线</p>
                                            <p>底座</p>
                                            <p>触控笔</p>
                                        </li>
                                        <li>
                                            <p class="firsts">CPU</p>
                                            <p>主板</p>
                                            <p>显卡</p>
                                            <p>硬盘</p>
                                            <p>内存</p>
                                            <p>机箱</p>
                                            <p>电源</p>
                                            <p>光驱</p>
                                        </li>
                                        <li>
                                            <p class="firsts">远程服务</p>

                                        </li>

                                    </ul>
                                </div>
                                <div class="category-right">
                                    <div class="logo">
                                        <ul>
                                            <li><img src="img/华为-手机.jpg"></li>
                                            <li><img src="img/apple.jpg"></li>
                                            <li><img src="img/三星手机.jpg"></li>
                                            <li><img src="img/xiaomi.jpg"></li>
                                            <li><img src="img/caono.jpg"></li>
                                            <li><img src="img/360.jpg"></li>
                                            <li><img src="img/huafei.jpg"></li>
                                            <li><img src="img/liuliang.jpg"></li>
                                        </ul>
                                    </div>
                                    <div class="sale">
                                        <img src="img/数码.jpg">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="catalog">
                            <a class="color colors" href="javascript:">电视</a>
                            <a class="color colors" href="javascript:">影音</a>
                            <a class="color colors"href="javascript:">智能</a>
                            <a class="color colors" href="javascript:">国美管家</a>
                            <div class="category">
                                <div class="category-left">
                                    <div class=" title">
                                        <ul>
                                            <li class="first">电子影音 &nbsp;></li>
                                            <li>以旧换新 &nbsp;></li>
                                            <li>美通卡 &nbsp;></li>
                                            <li>延保服务 &nbsp;></li>
                                            <li>办公生活 &nbsp;></li>
                                            <li>智享生活 &nbsp;></li>
                                        </ul>
                                    </div>
                                    <ul class="content">
                                        <li>电视</li>
                                        <li>电视配件</li>
                                        <li>DVD</li>
                                        <li>影音配件</li>
                                        <li>智能设备</li>
                                        <li>以旧换新</li>
                                        <li>清洁保养</li>
                                        <li>延长保修</li>
                                        <li>安装调试</li>
                                    </ul>
                                    <ul class="list">
                                        <li>
                                            <p class="firsts">全部电视</p>
                                            <p>国产品牌</p>
                                            <p>合资品牌</p>
                                            <p>4K电视</p>
                                        </li>
                                        <li>
                                            <p class="firsts">保养配件</p>
                                            <p>插线板</p>
                                            <p>电视盒</p>
                                            <p>电视挂架</p>
                                        </li>
                                        <li>
                                            <p class="firsts">影院</p>
                                            <p>播放器</p>
                                            <p>音响</p>
                                        </li>
                                        <li>
                                            <p class="firsts">其他配件</p>
                                            <p>影音线材</p>
                                            <p>转换器</p>
                                        </li>
                                        <li>
                                            <p class="firsts">智能手环</p>
                                            <p>智能手表</p>
                                            <p>智能眼镜</p>
                                            <p>智能家居</p>
                                            <p>航拍设备</p>
                                            <p>智能配饰</p>
                                            <p>智享生活</p>
                                        </li>
                                        <li>
                                            <p class="firsts">手机回收</p>
                                            <p>家电回收</p>
                                            <p>电脑回收</p>
                                        </li>
                                        <li>
                                            <p class="firsts">家电保养</p>
                                            <p>家电清洗</p>
                                        </li>
                                        <li>
                                            <p class="firsts">延长保修</p>
                                        </li>
                                        <li>
                                            <p class="firsts">空调安装</p>
                                        </li>

                                    </ul>
                                </div>
                                <div class="category-right">
                                    <div class="logo">
                                        <ul>
                                            <li><img src="img/华为-手机.jpg"></li>
                                            <li><img src="img/apple.jpg"></li>
                                            <li><img src="img/三星手机.jpg"></li>
                                            <li><img src="img/xiaomi.jpg"></li>
                                            <li><img src="img/caono.jpg"></li>
                                            <li><img src="img/360.jpg"></li>
                                            <li><img src="img/huafei.jpg"></li>
                                            <li><img src="img/liuliang.jpg"></li>
                                        </ul>
                                    </div>
                                    <div class="sale">
                                        <img src="img/数码.jpg">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="catalog">
                            <a class="color colors" href="javascript:">空调</a>
                            <a class="color colors" href="javascript:">冰箱</a>
                            <a class="color colors" href="javascript:">洗衣机</a>
                            <div class="category">
                                <div class="category-left">
                                    <div class=" title">
                                        <ul>
                                            <li class="first">空调 &nbsp;></li>
                                            <li>冰箱 &nbsp;></li>
                                            <li>洗衣机 &nbsp;></li>
                                            <li>大家电 &nbsp;></li>
                                            <li>美通卡 &nbsp;></li>
                                            <li>以旧换新 &nbsp;></li>
                                            <li>延保服务 &nbsp;></li>
                                            <li>家电清洗 &nbsp;></li>
                                            <li>办公生活 &nbsp;></li>
                                        </ul>
                                    </div>
                                    <ul class="content">
                                        <li>空调</li>
                                        <li>冰箱</li>
                                        <li>洗衣机</li>
                                    </ul>
                                    <ul class="list">
                                        <li>
                                            <p class="firsts">家用空调</p>
                                            <p>商用空调</p>
                                            <p>中央空调</p>
                                            <p>柜式空调</p>
                                            <p>移动空调</p>
                                            <p>定频</p>
                                        </li>
                                        <li>
                                            <p class="firsts">冰箱</p>
                                            <p>冰柜</p>
                                            <p>酒柜</p>
                                            <p>对开门</p>
                                            <p>三门</p>
                                            <p>电脑式</p>
                                            <p>机械式</p>
                                            <p>冰箱配件</p>
                                        </li>
                                        <li>
                                            <p class="firsts">滚筒式</p>
                                            <p>波轮式</p>
                                            <p>迷你式</p>
                                            <p>干衣机</p>
                                            <p>配件</p>
                                        </li>
                                    </ul>
                                </div>
                                <div class="category-right">
                                    <div class="logo">
                                        <ul>
                                            <li><img src="img/华为-手机.jpg"></li>
                                            <li><img src="img/apple.jpg"></li>
                                            <li><img src="img/三星手机.jpg"></li>
                                            <li><img src="img/xiaomi.jpg"></li>
                                            <li><img src="img/caono.jpg"></li>
                                            <li><img src="img/360.jpg"></li>
                                            <li><img src="img/huafei.jpg"></li>
                                            <li><img src="img/liuliang.jpg"></li>
                                        </ul>
                                    </div>
                                    <div class="sale">
                                        <img src="img/数码.jpg">
                                    </div>
                                </div>
                            </div>
                        </div>

                    </li>
                    <li>
                        <div class="catalog">
                            <a class="color colors" href="javascript:">厨房卫浴</a>
                            <a class="color colors" href="javascript:">生活电器</a>
                            <a class="color colors" href="javascript:">净化器</a>
                            <div class="category">
                                <div class="category-left">
                                    <div class=" title">
                                        <ul>
                                            <li class="first">烟灶卫浴 &nbsp;></li>
                                            <li>厨卫生活 &nbsp;></li>
                                            <li>国美净化 &nbsp;></li>
                                            <li>小家电馆 &nbsp;></li>
                                            <li>国美净水 &nbsp;></li>
                                            <li>美通卡 &nbsp;></li>
                                            <li>延保服务 &nbsp;></li>
                                            <li>家电清洗 &nbsp;></li>
                                        </ul>
                                    </div>
                                    <ul class="content">
                                        <li>厨卫大电</li>
                                        <li>厨房小电</li>
                                        <li>环境电器</li>
                                        <li>个人护理</li>
                                        <li>水家电</li>
                                        <li>家具电器</li>
                                        <li>健康电器</li>
                                    </ul>
                                    <ul class="list">
                                        <li>
                                            <p class="firsts">油烟机</p>
                                            <p>燃气灶</p>
                                            <p>消毒柜</p>
                                            <p>热水器</p>
                                            <p>厨卫配件</p>
                                        </li>
                                        <li>
                                            <p class="firsts">微波炉</p>
                                            <p>豆浆机</p>
                                            <p>电饭煲</p>
                                            <p>电磁炉</p>
                                            <p>灶具</p>
                                            <p>原汁机</p>
                                            <p>电水壶</p>
                                        </li>
                                        <li>
                                            <p class="firsts">电风扇</p>
                                            <p>空调扇</p>
                                            <p>净化器</p>
                                            <p>除湿机</p>
                                            <p>加湿器</p>
                                            <p>净化滤网</p>
                                            <p>取暖器</p>
                                        </li>
                                        <li>
                                            <p class="firsts">剃须刀</p>
                                            <p>电吹风</p>
                                            <p>理发器</p>
                                            <p>脱毛器</p>
                                            <p>修剪器</p>
                                            <p>美容仪</p>
                                        </li>
                                        <li>
                                            <p class="firsts">净水器</p>
                                            <p>饮水机</p>
                                            <p>滤水壶</p>
                                            <p>水龙头</p>
                                            <p>净水桶</p>
                                            <p>滤料</p>
                                            <p>智饮机</p>
                                        </li>
                                        <li>
                                            <p class="firsts">吸尘器</p>
                                            <p>挂烫机</p>
                                            <p>干鞋器</p>
                                            <p>电烫斗</p>
                                            <p>清洁机</p>
                                        </li>
                                        <li>
                                            <p class="firsts">足浴盆</p>
                                            <p>按摩器</p>
                                            <p>电子秤</p>
                                            <p>血压计</p>
                                            <p>足疗器</p>
                                            <p>制氧机</p>
                                        </li>
                                    </ul>
                                </div>
                                <div class="category-right">
                                    <div class="logo">
                                        <ul>
                                            <li><img src="img/华为-手机.jpg"></li>
                                            <li><img src="img/apple.jpg"></li>
                                            <li><img src="img/三星手机.jpg"></li>
                                            <li><img src="img/xiaomi.jpg"></li>
                                            <li><img src="img/caono.jpg"></li>
                                            <li><img src="img/360.jpg"></li>
                                            <li><img src="img/huafei.jpg"></li>
                                            <li><img src="img/liuliang.jpg"></li>
                                        </ul>
                                    </div>
                                    <div class="sale">
                                        <img src="img/数码.jpg">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="catalog">
                            <a class="color colors" href="javascript:">住在家居</a>
                            <a class="color colors" href="javascript:">家装建材</a>
                            <a class="color colors" href="javascript:">装修</a>
                            <div class="category">
                                <div class="category-left">
                                    <div class=" title">
                                        <ul>
                                            <li class="first">住宅家居 &nbsp;></li>
                                            <li>家装建材 &nbsp;></li>
                                            <li>家装馆 &nbsp;></li>
                                            <li>精品家居 &nbsp;></li>
                                            <li>红木家具 &nbsp;></li>
                                            <li>装修 &nbsp;></li>
                                        </ul>
                                    </div>
                                    <ul class="content">
                                        <li>客厅家具</li>
                                        <li>卧室家具</li>
                                        <li>餐厅家具</li>
                                        <li>儿童办公</li>
                                        <li>书房家具</li>
                                        <li>储物户外</li>
                                        <li>厨房卫浴</li>
                                        <li>灯具光源</li>
                                        <li>电工电料</li>
                                        <li>装饰材料</li>
                                    </ul>
                                    <ul class="list">
                                        <li>
                                            <p class="firsts">沙发</p>
                                            <p>实木沙发</p>
                                            <p>皮艺沙发</p>
                                            <p>茶几</p>
                                            <p>布艺沙发</p>
                                            <p>电视柜</p>
                                            <p>橱柜</p>
                                            <p>衣帽架</p>
                                        </li>
                                        <li>
                                            <p class="firsts">实木床</p>
                                            <p>皮艺床</p>
                                            <p>布艺床</p>
                                            <p>床头柜</p>
                                            <p>床</p>
                                            <p>床垫</p>
                                            <p>梳妆台</p>
                                            <p>衣柜</p>
                                        </li>
                                        <li>
                                            <p class="firsts">餐桌</p>
                                            <p>餐椅</p>
                                            <p>餐椅套装</p>
                                            <p>餐边柜</p>
                                        </li>
                                        <li>
                                            <p class="firsts">儿童桌椅</p>
                                            <p>儿童床类</p>
                                            <p>儿童衣柜</p>
                                            <p>儿童套装</p>
                                            <p>休闲躺椅</p>
                                        </li>
                                        <li>
                                            <p class="firsts">电脑桌</p>
                                            <p>电脑椅</p>
                                            <p>书柜</p>
                                        </li>
                                        <li>
                                            <p class="firsts">置物架</p>
                                            <p>层架</p>
                                            <p>晒衣架</p>
                                            <p>户外桌椅</p>
                                        </li>
                                        <li>
                                            <p class="firsts">马桶</p>
                                            <p>智能盖板</p>
                                            <p>沐浴花洒</p>
                                            <p>浴室柜</p>
                                            <p>水槽</p>
                                            <p>水龙头</p>
                                            <p>卫浴挂件</p>
                                        </li>
                                        <li>
                                            <p class="firsts">吸顶灯</p>
                                            <p>吊灯</p>
                                            <p>LED灯</p>
                                            <p>台灯</p>
                                            <p>筒射灯</p>
                                        </li>
                                        <li>
                                            <p class="firsts">插座</p>
                                            <p>开关</p>
                                            <p>接线板</p>
                                            <p>安防监控</p>
                                            <p>电线</p>
                                            <p>断路器</p>
                                            <p>电工配件</p>
                                        </li>
                                        <li>
                                            <p class="firsts">壁纸</p>
                                            <p>瓷砖</p>
                                            <p>地板</p>
                                            <p>油漆涂料</p>
                                            <p>散热器</p>
                                            <p>净化除味</p>
                                            <p>涂刷辅料</p>
                                            <p>门窗定制</p>
                                        </li>
                                    </ul>
                                </div>
                                <div class="category-right">
                                    <div class="logo">
                                        <ul>
                                            <li><img src="img/华为-手机.jpg"></li>
                                            <li><img src="img/apple.jpg"></li>
                                            <li><img src="img/三星手机.jpg"></li>
                                            <li><img src="img/xiaomi.jpg"></li>
                                            <li><img src="img/caono.jpg"></li>
                                            <li><img src="img/360.jpg"></li>
                                            <li><img src="img/huafei.jpg"></li>
                                            <li><img src="img/liuliang.jpg"></li>
                                        </ul>
                                    </div>
                                    <div class="sale">
                                        <img src="img/数码.jpg">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="catalog">
                            <a class="color colors" href="javascript:">床品家纺</a>
                            <a class="color colors" href="javascript:">家居日用</a>
                            <a class="color colors" href="javascript:">家装城</a>
                            <div class="category">
                                <div class="category-left">
                                    <div class=" title">
                                        <ul>
                                            <li class="first">床品家纺 &nbsp;></li>
                                            <li>家居日用 &nbsp;></li>
                                            <li>海外家居 &nbsp;></li>
                                            <li>家居特卖 &nbsp;></li>
                                            <li>家装城 &nbsp;></li>
                                        </ul>
                                    </div>
                                    <ul class="content">
                                        <li>夏凉用品</li>
                                        <li>床品件套</li>
                                        <li>芯类</li>
                                        <li>毛巾家纺</li>
                                        <li>布艺纺织</li>
                                        <li>厨具</li>
                                        <li>水具茶具</li>
                                        <li>家装软饰</li>
                                        <li>生活日用</li>
                                        <li>宠物用品</li>
                                    </ul>
                                    <ul class="list">
                                        <li>
                                            <p class="firsts">凉席</p>
                                            <p>夏凉被</p>
                                            <p>蚊帐</p>
                                            <p>凉枕</p>
                                            <p>良品套装</p>
                                        </li>
                                        <li>
                                            <p class="firsts">三件套</p>
                                            <p>四件套</p>
                                            <p>婚庆用品</p>
                                            <p>床单被罩</p>
                                        </li>
                                        <li>
                                            <p class="firsts">被子</p>
                                            <p>枕芯枕套</p>
                                            <p>床垫</p>
                                            <p>抱枕</p>
                                            <p>毛巾被</p>
                                            <p>电热毯</p>
                                        </li>
                                        <li>
                                            <p class="firsts">面巾</p>
                                            <p>浴巾</p>
                                            <p>方巾</p>
                                            <p>毛巾套装</p>
                                            <p>童巾</p>
                                            <p>浴袍</p>
                                            <p>运动巾</p>
                                        </li>
                                        <li>
                                            <p class="firsts">地毯</p>
                                            <p>家居服</p>
                                            <p>家居鞋</p>
                                            <p>窗帘</p>
                                            <p>沙发套</p>
                                            <p>洗衣机罩</p>
                                            <p>桌布</p>
                                            <p>布艺饰品</p>
                                        </li>
                                        <li>
                                            <p class="firsts">烹饪锅具</p>
                                            <p>刀剪砧板</p>
                                            <p>保险收纳</p>
                                            <p>厨房小件</p>
                                            <p>精美餐具</p>
                                        </li>
                                        <li>
                                            <p class="firsts">保温杯</p>
                                            <p>保温壶</p>
                                            <p>塑料杯</p>
                                            <p>茶具</p>
                                            <p>紫砂杯</p>
                                            <p>玻璃杯</p>
                                            <p>酒具</p>
                                        </li>
                                        <li>
                                            <p class="firsts">居家软饰</p>
                                            <p>工艺摆件</p>
                                            <p>创意小件</p>
                                            <p>家居保健</p>
                                        </li>
                                        <li>
                                            <p class="firsts">缝纫用品</p>
                                            <p>收纳用品</p>
                                            <p>洗晒用品</p>
                                            <p>洗浴用品</p>
                                            <p>雨伞雨具</p>
                                            <p>衣橱衣架</p>
                                        </li>
                                        <li>
                                            <p class="firsts">宠物主粮</p>
                                            <p>宠物零食</p>
                                            <p>医护美容</p>
                                        </li>
                                    </ul>
                                </div>
                                <div class="category-right">
                                    <div class="logo">
                                        <ul>
                                            <li><img src="img/华为-手机.jpg"></li>
                                            <li><img src="img/apple.jpg"></li>
                                            <li><img src="img/三星手机.jpg"></li>
                                            <li><img src="img/xiaomi.jpg"></li>
                                            <li><img src="img/caono.jpg"></li>
                                            <li><img src="img/360.jpg"></li>
                                            <li><img src="img/huafei.jpg"></li>
                                            <li><img src="img/liuliang.jpg"></li>
                                        </ul>
                                    </div>
                                    <div class="sale">
                                        <img src="img/数码.jpg">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="catalog">
                            <a class="color colors" href="javascript:">食品酒水</a>
                            <a class="color colors" href="javascript:">母婴玩具</a>
                            <div class="category">
                                <div class="category-left">
                                    <div class=" title">
                                        <ul>
                                            <li class="first">食品酒水 &nbsp;></li>
                                            <li>母婴玩具 &nbsp;></li>
                                            <li>食品保健 &nbsp;></li>
                                            <li>酒水盛宴 &nbsp;></li>
                                            <li>母婴用品 &nbsp;></li>
                                            <li>母婴管家 &nbsp;></li>
                                        </ul>
                                    </div>
                                    <ul class="content">
                                        <li>休闲零食</li>
                                        <li>粮油生鲜</li>
                                        <li>进口食品</li>
                                        <li>酒水</li>
                                        <li>礼卡特产</li>
                                        <li>冲调饮品</li>
                                        <li>茶叶</li>
                                    </ul>
                                    <ul class="list">
                                        <li>
                                            <p class="firsts">坚果炒货</p>
                                            <p>巧克力</p>
                                            <p>肉干肉铺</p>
                                            <p>饼干糕点</p>
                                            <p>休闲零食</p>
                                        </li>
                                        <li>
                                            <p class="firsts">水果蔬菜</p>
                                            <p>海鲜特产</p>
                                            <p>肉食蛋</p>
                                            <p>米面粮油</p>
                                            <p>南北干货</p>
                                            <p>粽子</p>
                                        </li>
                                        <li>
                                            <p class="firsts">牛奶</p>
                                            <p>冲调饮品</p>
                                            <p>饼干糕点</p>
                                            <p>糖</p>
                                            <p>米面粮油</p>
                                            <p>休闲零食</p>
                                        </li>
                                        <li>
                                            <p class="firsts">白酒</p>
                                            <p>洋酒</p>
                                            <p>葡萄酒</p>
                                            <p>黄酒</p>
                                            <p>啤酒</p>
                                            <p>保健酒</p>
                                            <p>老酒</p>
                                        </li>
                                        <li>
                                            <p class="firsts">东北</p>
                                            <p>西北</p>
                                            <p>华北</p>
                                            <p>西南</p>
                                            <p>华东</p>
                                            <p>月饼卡</p>
                                            <p>大闸蟹</p>
                                            <p>礼品城</p>
                                            <p>美通卡</p>
                                        </li>
                                        <li>
                                            <p class="firsts">咖啡</p>
                                            <p>谷物冲调</p>
                                            <p>饮料</p>
                                            <p>奶茶</p>
                                            <p>其他</p>
                                        </li>
                                        <li>
                                            <p class="firsts">绿茶</p>
                                            <p>铁观音</p>
                                            <p>普洱茶</p>
                                            <p>红茶</p>
                                            <p>金骏眉</p>
                                            <p>花茶</p>
                                            <p>果茶</p>
                                        </li>
                                    </ul>
                                </div>
                                <div class="category-right">
                                    <div class="logo">
                                        <ul>
                                            <li><img src="img/华为-手机.jpg"></li>
                                            <li><img src="img/apple.jpg"></li>
                                            <li><img src="img/三星手机.jpg"></li>
                                            <li><img src="img/xiaomi.jpg"></li>
                                            <li><img src="img/caono.jpg"></li>
                                            <li><img src="img/360.jpg"></li>
                                            <li><img src="img/huafei.jpg"></li>
                                            <li><img src="img/liuliang.jpg"></li>
                                        </ul>
                                    </div>
                                    <div class="sale">
                                        <img src="img/数码.jpg">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="catalog">
                            <a class="color colors" href="javascript:">医疗保健</a>
                            <a class="color colors" href="javascript:">美妆个护</a>
                            <div class="category">
                                <div class="category-left">
                                    <div class=" title">
                                        <ul>
                                            <li class="first">医疗保健 &nbsp;></li>
                                            <li>美妆个护 &nbsp;></li>
                                            <li>海外购 &nbsp;></li>
                                            <li>名品个护 &nbsp;></li>
                                            <li>两性生活 &nbsp;></li>
                                        </ul>
                                    </div>
                                    <ul class="content">
                                        <li>营养成分</li>
                                        <li>面部护理</li>
                                        <li>魅力彩妆</li>
                                        <li>男士护理</li>
                                    </ul>
                                    <ul class="list">
                                        <li>
                                            <p class="firsts">蛋白粉</p>
                                            <p>钙</p>
                                            <p>维生素</p>
                                            <p>鱼油</p>
                                            <p>左旋肉碱</p>
                                        </li>
                                        <li>
                                            <p class="firsts">洁面</p>
                                            <p>化妆水</p>
                                            <p>乳液面霜</p>
                                            <p>面膜</p>
                                            <p>防晒隔离</p>
                                            <p>套装礼盒</p>
                                            <p>美容仪器</p>
                                        </li>
                                        <li>
                                            <p class="firsts">粉底遮瑕</p>
                                            <p>沐浴</p>
                                            <p>脱毛膏</p>
                                            <p>纤体瘦身</p>
                                            <p>染发造型</p>
                                        </li>
                                        <li>
                                            <p class="firsts">剃须护理</p>
                                            <p>防脱洗护</p>
                                            <p>脸部护理</p>
                                            <p>眼部护理</p>
                                            <p>男士唇膏</p>
                                        </li>

                                    </ul>
                                </div>
                                <div class="category-right">
                                    <div class="logo">
                                        <ul>
                                            <li><img src="img/华为-手机.jpg"></li>
                                            <li><img src="img/apple.jpg"></li>
                                            <li><img src="img/三星手机.jpg"></li>
                                            <li><img src="img/xiaomi.jpg"></li>
                                            <li><img src="img/caono.jpg"></li>
                                            <li><img src="img/360.jpg"></li>
                                            <li><img src="img/huafei.jpg"></li>
                                            <li><img src="img/liuliang.jpg"></li>
                                        </ul>
                                    </div>
                                    <div class="sale">
                                        <img src="img/数码.jpg">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="catalog">
                            <a class="color colors" href="javascript:">服饰鞋帽</a>
                            <a class="color colors" href="javascript:">箱包奢品</a>
                            <div class="category">
                                <div class="category-left">
                                    <div class=" title">
                                        <ul>
                                            <li class="first">服饰鞋帽 &nbsp;></li>
                                            <li>箱包奢品 &nbsp;></li>
                                            <li>服装城 &nbsp;></li>
                                            <li>潮流服饰 &nbsp;></li>
                                        </ul>
                                    </div>
                                    <ul class="content">
                                        <li>品质男装</li>
                                        <li>时尚女装</li>
                                        <li>家居内衣</li>
                                        <li>精品男鞋</li>
                                        <li>服饰配件</li>
                                        <li>奢侈品</li>
                                        <li>精品男包</li>
                                        <li>旅行箱包</li>
                                    </ul>
                                    <ul class="list">
                                        <li>
                                            <p class="firsts">衬衫</p>
                                            <p>休闲裤</p>
                                            <p>牛仔裤</p>
                                            <p>针织衫</p>
                                            <p>夹克</p>
                                            <p>西装</p>
                                            <p>西裤</p>
                                            <p>卫衣</p>
                                        </li>
                                        <li>
                                            <p class="firsts">连衣裙</p>
                                            <p>卫衣</p>
                                            <p>牛仔裤</p>
                                            <p>休闲裤</p>
                                            <p>短外套</p>
                                            <p>衬衫</p>
                                            <p>西装</p>
                                            <p>针织衫</p>
                                        </li>
                                        <li>
                                            <p class="firsts">男士内裤</p>
                                            <p>男袜</p>
                                            <p>背心</p>
                                            <p>家居服</p>
                                            <p>女士内裤</p>
                                            <p>打底裤</p>
                                            <p>女袜</p>
                                            <p>文胸</p>
                                        </li>
                                        <li>
                                            <p class="firsts">商务鞋</p>
                                            <p>休闲鞋</p>
                                            <p>板鞋</p>
                                            <p>帆布鞋</p>
                                            <p>沙滩鞋</p>
                                            <p>家居拖鞋</p>
                                            <p>女靴</p>
                                        </li>
                                        <li>
                                            <p class="firsts">太阳镜</p>
                                            <p>遮阳伞</p>
                                            <p>丝巾</p>
                                            <p>男式皮带</p>
                                            <p>鞋配件</p>
                                            <p>手套</p>
                                            <p>围巾</p>
                                            <p></p>
                                        </li>
                                        <li>
                                            <p class="firsts">单肩包</p>
                                            <p>手提包</p>
                                            <p>钱包</p>
                                            <p>斜挎包</p>
                                        </li>
                                        <li>
                                            <p class="firsts">单肩包</p>
                                            <p>手提包</p>
                                            <p>商务手提包</p>
                                            <p>钱包</p>
                                            <p>斜挎包</p>
                                            <p>手包</p>
                                        </li>
                                        <li>
                                            <p class="firsts">登机箱</p>
                                            <p>旅行包</p>
                                            <p>托运箱</p>
                                            <p>旅行配件</p>
                                        </li>
                                    </ul>
                                </div>
                                <div class="category-right">
                                    <div class="logo">
                                        <ul>
                                            <li><img src="img/华为-手机.jpg"></li>
                                            <li><img src="img/apple.jpg"></li>
                                            <li><img src="img/三星手机.jpg"></li>
                                            <li><img src="img/xiaomi.jpg"></li>
                                            <li><img src="img/caono.jpg"></li>
                                            <li><img src="img/360.jpg"></li>
                                            <li><img src="img/huafei.jpg"></li>
                                            <li><img src="img/liuliang.jpg"></li>
                                        </ul>
                                    </div>
                                    <div class="sale">
                                        <img src="img/数码.jpg">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="catalog">
                            <a class="color colors" href="javascript:">运动户外</a>
                            <a class="color colors" href="javascript:">钟表首饰</a>
                            <div class="category">
                                <div class="category-left">
                                    <div class=" title">
                                        <ul>
                                            <li class="first">运动户外 &nbsp;></li>
                                            <li>钟表首饰 &nbsp;></li>
                                            <li>便宜购 &nbsp;></li>
                                        </ul>
                                    </div>
                                    <ul class="content">
                                        <li>运动鞋服</li>
                                        <li>运动器械</li>
                                        <li>户外装备</li>
                                        <li>户外鞋服</li>
                                        <li>钟表</li>
                                        <li>珠宝首饰</li>
                                    </ul>
                                    <ul class="list">
                                        <li>
                                            <p class="firsts">跑步鞋</p>
                                            <p>休闲鞋</p>
                                            <p>帆布鞋</p>
                                            <p>足球鞋</p>
                                            <p>凉鞋</p>
                                            <p>运动衣</p>
                                            <p>棉服</p>
                                            <p>羽绒服</p>
                                        </li>
                                        <li>
                                            <p class="firsts">自行车</p>
                                            <p>羽毛球</p>
                                            <p>篮球</p>
                                            <p>跑步机</p>
                                            <p>运动器材</p>
                                            <p>瑜伽垫</p>
                                            <p>护具</p>
                                            <p>极限轮滑</p>
                                        </li>
                                        <li>
                                            <p class="firsts">帐篷</p>
                                            <p>背包</p>
                                            <p>桌椅床</p>
                                            <p>望远镜</p>
                                            <p>照明</p>
                                            <p>垫子</p>
                                            <p>工具</p>
                                            <p>军迷用品</p>
                                        </li>
                                        <li>
                                            <p class="firsts">户外衬衣</p>
                                            <p>速干衣</p>
                                            <p>沙滩鞋</p>
                                            <p>休闲鞋</p>
                                            <p>登山鞋</p>
                                        </li>
                                        <li>
                                            <p class="firsts">瑞士表</p>
                                            <p>国产表</p>
                                            <p>日韩表</p>
                                            <p>时尚表</p>
                                            <p>儿童手表</p>
                                            <p>挂钟闹钟</p>
                                        </li>
                                        <li>
                                            <p class="firsts">金银投资</p>
                                            <p>银饰品</p>
                                            <p>钻石饰品</p>
                                            <p>翡翠玉石</p>
                                            <p>水晶玛瑙</p>
                                            <p>宝石珍珠</p>
                                            <p>时尚饰品</p>
                                        </li>

                                    </ul>
                                </div>
                                <div class="category-right">
                                    <div class="logo">
                                        <ul>
                                            <li><img src="img/华为-手机.jpg"></li>
                                            <li><img src="img/apple.jpg"></li>
                                            <li><img src="img/三星手机.jpg"></li>
                                            <li><img src="img/xiaomi.jpg"></li>
                                            <li><img src="img/caono.jpg"></li>
                                            <li><img src="img/360.jpg"></li>
                                            <li><img src="img/huafei.jpg"></li>
                                            <li><img src="img/liuliang.jpg"></li>
                                        </ul>
                                    </div>
                                    <div class="sale">
                                        <img src="img/数码.jpg">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="catalog">
                            <a class="color colors" href="javascript:">汽车整车</a>
                            <a class="color colors" href="javascript:">汽车用品</a>
                            <div class="category">
                                <div class="category-left">
                                    <div class=" title">
                                        <ul>
                                            <li class="first">国美汽车 &nbsp;></li>
                                            <li>真划算 &nbsp;></li>
                                            <li>9元免运费 &nbsp;></li>
                                        </ul>
                                    </div>
                                    <ul class="content">
                                        <li>整车服务</li>
                                        <li>车载电器</li>
                                        <li>养护配件</li>
                                        <li>美容清洁</li>
                                        <li>车饰精品</li>
                                        <li>安全自驾</li>
                                    </ul>
                                    <ul class="list">
                                        <li>
                                            <p class="firsts">新车定金</p>
                                            <p>新车全款</p>
                                            <p>维护保养</p>
                                            <p>摩托车</p>
                                        </li>
                                        <li>
                                            <p class="firsts">导航仪</p>
                                            <p>预警仪</p>
                                            <p>净化器</p>
                                            <p>冷暖箱</p>
                                            <p>吸尘器</p>
                                            <p>倒车雷达</p>
                                            <p>蓝牙设备</p>
                                        </li>
                                        <li>
                                            <p class="firsts">机油</p>
                                            <p>添加剂</p>
                                            <p>防冻液</p>
                                            <p>空调养护</p>
                                            <p>刹车油</p>
                                            <p>底盘装甲</p>
                                            <p>雨刷</p>
                                            <p>轮胎</p>
                                        </li>
                                        <li>
                                            <p class="firsts">洗车机</p>
                                            <p>车蜡</p>
                                            <p>玻璃水</p>
                                            <p>清洁剂</p>
                                            <p>汽车配件</p>
                                            <p>补漆笔</p>
                                        </li>
                                        <li>
                                            <p class="firsts">四季垫</p>
                                            <p>座套</p>
                                            <p>凉垫</p>
                                            <p>香水</p>
                                            <p>挂饰摆件</p>
                                            <p>功能精品</p>
                                        </li>
                                        <li>
                                            <p class="firsts">防盗设备</p>
                                            <p>胎压监测</p>
                                            <p>应急救援</p>
                                            <p>自驾设备</p>
                                            <p>倒车设备</p>
                                            <p>打气泵</p>
                                            <p>平衡车</p>
                                        </li>

                                    </ul>
                                </div>
                                <div class="category-right">
                                    <div class="logo">
                                        <ul>
                                            <li><img src="img/华为-手机.jpg"></li>
                                            <li><img src="img/apple.jpg"></li>
                                            <li><img src="img/三星手机.jpg"></li>
                                            <li><img src="img/xiaomi.jpg"></li>
                                            <li><img src="img/caono.jpg"></li>
                                            <li><img src="img/360.jpg"></li>
                                            <li><img src="img/huafei.jpg"></li>
                                            <li><img src="img/liuliang.jpg"></li>
                                        </ul>
                                    </div>
                                    <div class="sale">
                                        <img src="img/数码.jpg">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="catalog">
                            <a class="color colors" href="javascript:">文化艺术</a>
                            <div class="category">
                                <div class="category-left">
                                    <div class=" title">
                                        <ul>
                                            <li class="first">文化艺术 &nbsp;></li>
                                            <li>天天低价 &nbsp;></li>
                                        </ul>
                                    </div>
                                    <ul class="content">
                                        <li>书法</li>
                                        <li>国画</li>
                                        <li>文玩杂顶</li>
                                        <li>陶瓷紫砂</li>
                                        <li>珠宝玉石</li>
                                    </ul>
                                    <ul class="list">
                                        <li>
                                            <p class="firsts">行书</p>
                                            <p>楷书</p>
                                            <p>隶书</p>
                                            <p>草书</p>
                                            <p>竖幅</p>
                                            <p>横幅</p>
                                        </li>
                                        <li>
                                            <p class="firsts">花鸟</p>
                                            <p>人物</p>
                                            <p>山水</p>
                                            <p>写意</p>
                                            <p>斗方</p>
                                            <p>竖幅</p>
                                            <p>横幅</p>
                                        </li>
                                        <li>
                                            <p class="firsts">手串珠串</p>
                                            <p>雕件绣品</p>
                                            <p>民间工艺</p>
                                            <p>内画</p>
                                        </li>
                                        <li>
                                            <p class="firsts">茶器</p>
                                            <p>陈设器</p>
                                            <p>紫砂</p>
                                            <p>陶瓷</p>
                                            <p>彩绘陶</p>
                                            <p>茶具</p>
                                        </li>
                                        <li>
                                            <p class="firsts">翡翠</p>
                                            <p>冰糯种</p>
                                        </li>

                                    </ul>
                                </div>
                                <div class="category-right">
                                    <div class="logo">
                                        <ul>
                                            <li><img src="img/华为-手机.jpg"></li>
                                            <li><img src="img/apple.jpg"></li>
                                            <li><img src="img/三星手机.jpg"></li>
                                            <li><img src="img/xiaomi.jpg"></li>
                                            <li><img src="img/caono.jpg"></li>
                                            <li><img src="img/360.jpg"></li>
                                            <li><img src="img/huafei.jpg"></li>
                                            <li><img src="img/liuliang.jpg"></li>
                                        </ul>
                                    </div>
                                    <div class="sale">
                                        <img src="img/数码.jpg">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="catalog">
                            <a class="color colors" href="javascript:">旅行</a>
                            <a class="color colors" href="javascript:">电影票</a>
                            <a class="color colors" href="javascript:">演出票</a>
                            <a class="color colors" href="javascript:">游戏</a>
                            <div class="category">
                                <div class="category-left">
                                    <div class=" title">
                                        <ul>
                                            <li class="first">旅行 &nbsp;></li>
                                            <li>机票 &nbsp;></li>
                                            <li>房产 &nbsp;></li>
                                            <li>游戏 &nbsp;></li>
                                            <li>彩票 &nbsp;></li>
                                            <li>教育培训 &nbsp;></li>
                                        </ul>
                                    </div>
                                    <ul class="content">
                                        <li>旅行</li>
                                        <li>房产</li>
                                        <li>电影票</li>
                                        <li>演出票</li>
                                        <li>游戏</li>
                                        <li>彩票</li>
                                        <li>教育培训</li>
                                    </ul>
                                    <ul class="list">
                                        <li>
                                            <p class="firsts">机票</p>
                                            <p>火车票</p>
                                            <p>酒店</p>
                                            <p>周边游</p>
                                            <p>签证</p>
                                            <p>国内游</p>
                                        </li>
                                        <li>
                                            <p class="firsts">新房</p>
                                        </li>
                                        <li>
                                            <p class="firsts">电影选座</p>
                                            <p>热映影片</p>
                                            <p>兑换券</p>
                                            <p>电影卡</p>
                                        </li>
                                        <li>
                                            <p class="firsts">演唱会</p>
                                            <p>舞台剧</p>
                                            <p>音乐会</p>
                                            <p>舞蹈芭蕾</p>
                                            <p>戏曲综艺</p>
                                            <p>体育赛事</p>
                                            <p>儿童亲子</p>
                                        </li>
                                        <li>
                                            <p class="firsts">游戏点卡</p>
                                            <p>手机游戏</p>
                                            <p>手游商城</p>
                                            <p>网页游戏</p>
                                        </li>
                                        <li>
                                            <p class="firsts">双色球</p>
                                            <p>福彩3D</p>
                                            <p>七乐彩</p>
                                            <p>大乐透</p>
                                            <p>排列3</p>
                                            <p>排列5</p>
                                            <p>七星彩</p>
                                        </li>
                                        <li>
                                            <p class="firsts">体验课</p>
                                            <p>兴趣爱好</p>
                                            <p>早教</p>
                                            <p>留学</p>
                                            <p>游学</p>
                                            <p>电子书</p>
                                            <p>视频课程</p>
                                            <p>职业技能</p>
                                        </li>

                                    </ul>
                                </div>
                                <div class="category-right">
                                    <div class="logo">
                                        <ul>
                                            <li><img src="img/华为-手机.jpg"></li>
                                            <li><img src="img/apple.jpg"></li>
                                            <li><img src="img/三星手机.jpg"></li>
                                            <li><img src="img/xiaomi.jpg"></li>
                                            <li><img src="img/caono.jpg"></li>
                                            <li><img src="img/360.jpg"></li>
                                            <li><img src="img/huafei.jpg"></li>
                                            <li><img src="img/liuliang.jpg"></li>
                                        </ul>
                                    </div>
                                    <div class="sale">
                                        <img src="img/数码.jpg">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="last">
                        <div class="catalog">
                            <a class="color colors" href="javascript:">金融理财</a>
                            <a class="color colors" href="javascript:">基金理财</a>
                            <div class="category">
                                <div class="category-left">
                                    <div class=" title">
                                        <ul>
                                            <li class="first">金融理财 &nbsp;></li>
                                        </ul>
                                    </div>
                                    <ul class="content">
                                        <li>定期理财</li>
                                        <li>活期理财</li>
                                        <li>基金理财</li>
                                        <li>保险理财</li>
                                    </ul>
                                    <ul class="list">
                                        <li>
                                            <p class="firsts">定期理财</p>
                                            <p>投金宝</p>
                                            <p>票据理财</p>
                                            <p>转让理财</p>
                                            <p>预约理财</p>
                                        </li>
                                        <li>
                                            <p class="firsts">美盈宝</p>
                                        </li>
                                        <li>
                                            <p class="firsts">基金</p>
                                        </li>
                                        <li>
                                            <p class="firsts">保险理财</p>
                                        </li>

                                    </ul>
                                </div>
                                <div class="category-right">
                                    <div class="logo">
                                        <ul>
                                            <li><img src="img/华为-手机.jpg"></li>
                                            <li><img src="img/apple.jpg"></li>
                                            <li><img src="img/三星手机.jpg"></li>
                                            <li><img src="img/xiaomi.jpg"></li>
                                            <li><img src="img/caono.jpg"></li>
                                            <li><img src="img/360.jpg"></li>
                                            <li><img src="img/huafei.jpg"></li>
                                            <li><img src="img/liuliang.jpg"></li>
                                        </ul>
                                    </div>
                                    <div class="sale">
                                        <img src="img/数码.jpg">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>

            <div id="carousel" class="carousel">
                <div id="m_unit" class="m_unit">
                    <ul>
                        <li><a href=""><img src="img/0.jpg" alt=""></a></li>
                        <li><a href=""><img src="img/1.jpg" alt=""></a></li>
                        <li><a href=""><img src="img/2.jpg" alt=""></a></li>
                        <li><a href=""><img src="img/3.jpg" alt=""></a></li>
                        <li><a href=""><img src="img/4.jpg" alt=""></a></li>
                        <li><a href=""><img src="img/5.jpg" alt=""></a></li>
                        <li><a href=""><img src="img/6.jpg" alt=""></a></li>
                        <li><a href=""><img src="img/7.jpg" alt=""></a></li>
                    </ul>
                </div>
                <div class="btns">
                    <a href="javascript:" class="leftBtn" id="leftBtn"></a>
                    <a href="javascript:" class="rightBtn" id="rightBtn"></a>
                </div>
                <div class="circles" id="circles">
                    <ol>
                        <li class="current"></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ol>
                </div>
            </div>

            <div class="right-nav">
                <div class="nav-headers">
                    <div class="nav-head">
                        <span>快讯</span>
                        <a href="javascript:">更多 ></a>
                    </div>
                    <p class="nav-body">
                        <a href="javascript:">资讯</a>
                        <span>峨眉山国美谣 民谣乐队组合开唱</span>
                    </p>
                    <p class="nav-body">
                        <a href="javascript:">特惠</a>
                        <span class="nav-body-tip">vivo X9s 64G领券立减200</span>
                    </p>
                    <p class="nav-body">
                        <a href="javascript:">特惠</a>
                        <span>生活家电 美的4L智能电饭煲199元</span>
                    </p>
                    <p class="nav-body">
                        <a href="javascript:">公益</a>
                        <span>国美公益 你不知道的事</span>
                    </p>
                </div>
                <div class="nav-foot">
                    <li>
                        <img src="img/q1.png" alt="">
                        <a href="">充值</a>
                    </li>
                    <li>
                        <img src="img/q2.png" alt="">
                        <a href="">票务</a>
                    </li>
                    <li>
                        <img src="img/q3.png" alt="">
                        <a href="">游戏</a>
                    </li>
                    <li>
                        <img src="img/q4.png" alt="">
                        <a href="">旅行</a>
                    </li>
                    <li>
                        <img src="img/q5.png" alt="">
                        <a href="">美盈宝</a>
                    </li>
                    <li>
                        <img src="img/q6.png" alt="">
                        <a href="">基金</a>
                    </li>
                    <li>
                        <img src="img/q7.png" alt="">
                        <a href="">视频</a>
                    </li>
                    <li>
                        <img src="img/q8.png" alt="">
                        <a href="">找服务</a>
                    </li>
                    <li>
                        <img src="img/q9.png" alt="">
                        <a href="">金融</a>
                    </li>
                    <li>
                        <img src="img/q10.png" alt="">
                        <a href="">定期</a>
                    </li>
                    <li>
                        <img src="img/q11.png" alt="">
                        <a href="">转让</a>
                    </li>
                    <li>
                        <img src="img/q12.png" alt="">
                        <a href="">帮助</a>
                    </li>
                </div>
                <img src="img/q13.png" alt="">
            </div>
        </div>
<!--热门商品-->
<div class="big-box">
    <ul id="nihao"></ul>
    <div>
        <ul class="address-ul">
        </ul>
    </div>
            <ul id="hot-goods">
            </ul>
    </div>

<!--继续加载-->
<div class="show-all-address">继续加载</div>
<!--底部-->
<div class="footer">
    <div class="footer-top">
        <li><a href="" class="outer">
            <p>品质</p></a>
            <span></span>
            <a href="" class="inside">正品行货 购物无忧</a></li>
        <li><a href="" class="outer outer2">
            <p>低价</p></a>
            <span></span>
            <a href="" class="inside">普惠实价 帮你省钱</a></li>
        <li><a href="" class="outer outer3">
            <p>速达</p></a>
            <span></span>
            <a href="" class="inside">专业配送 按时按需</a></li>
    </div>
    <!--服务列表-->
    <div class="footer-centre">
        <li class="footer-centre0">
            <p class="footer-centre1">物流配送</p>
            <p><a href="javascript:">配送查询</a></p>
            <p><a href="javascript:">配送服务</a></p>
            <p><a href="javascript:">配送费用</a></p>
            <p><a href="javascript:">配送时效</a></p>
            <p><a href="javascript:">签收与验货</a></p>
        </li>
        <li class="footer-centre0 footer-centre-0">
            <p class="footer-centre1">支付与账户</p>
            <p><a href="javascript:">货到付款</a></p>
            <p><a href="javascript:">在线支付</a></p>
            <p><a href="javascript:">分期付款</a></p>
            <p><a href="javascript:">门店支付</a></p>
            <p><a href="javascript:">账户安全</a></p>
        </li>
        <li class="footer-centre0 footer-centre-0">
            <p class="footer-centre1">售后服务</p>
            <p><a href="javascript:">退换货服务</a></p>
            <p><a href="javascript:">退款说明</a></p>
            <p><a href="javascript:">专业维修</a></p>
            <p><a href="javascript:">延保服务</a></p>
            <p><a href="javascript:">家电回收</a></p>
        </li>
        <li class="footer-centre0 footer-centre-0">
            <p class="footer-centre1">会员专区</p>
            <p><a href="javascript:">会员介绍</a></p>
            <p><a href="javascript:">优惠券说明</a></p>
            <p><a href="javascript:">美豆说明</a></p>
            <p><a href="javascript:">商品评价</a></p>
        </li>
        <li class="footer-centre0 footer-centre-0">
            <p class="footer-centre1">购物帮助</p>
            <p><a href="javascript:">购物保障</a></p>
            <p><a href="javascript:">购物流程</a></p>
            <p><a href="javascript:">促销优惠</a></p>
            <p><a href="javascript:">焦点问题</a></p>
            <p><a href="javascript:">联系我们</a></p>
        </li>
    </div>
    <!--商城介绍-->
    <div class="footer-bottom">
        <div class="footer-bottom0">
            <div class="box">
                <span>
                    <i></i>
                    <p>
                        <strong>门店服务</strong>
                        <a href="javascript:">国美门店全国共2000余家</a>
                    </p>
                </span>
                <span>
                    <i class="box-fix"></i>
                    <p>
                        <strong>用户体验</strong>
                        <a href="javascript:">参与用户体验改进计划 用户反馈</a>
                    </p>
                </span>
                <div class="code">
                    <i></i>
                    <p>公众号</p>
                    <div class="code-img">
                        <img src="img/T1GObvBQZs1RCvBVdK.jpg">
                    </div>
                </div>
                <div class="code code-wap">
                    <i class="code-wap1"></i>
                    <p>手机站点</p>
                    <div class="code-img">
                        <img src="img/T1m2YvBTDj1RCvBVdK.jpg">
                    </div>
                </div>
                <div class="code-app">
                    <i><img src="img/T1g2LvBbdj1RCvBVdK.png" alt=""></i>
                    <p>扫描下载客户端</p>

                </div>
                <ul class="headline">
                    <a href="javascript:"><li>国美集团</li></a>
                    <a href="javascript:"><li>国美管家</li></a>
                    <a href="javascript:"><li>关于国美</li></a>
                    <a href="javascript:"><li>加入我们 &nbsp;&nbsp;|</li></a>
                    <a href="javascript:"> <li>品牌大全</li></a>
                    <a href="javascript:"> <li>商品专题</li></a>
                    <a href="javascript:"><li>批发大全</li></a>
                    <a href="javascript:"><li>热词搜索</li></a>
                    <a href="javascript:"><li>友情链接</li></a>
                    <a href="javascript:"><li>风险监测 &nbsp;&nbsp;|</li></a>
                    <a href="javascript:"><li>销售联盟</li></a>
                    <a href="javascript:"> <li>商家入驻</li></a>
                </ul>
                <p class="version">国美在线电子商务有限公司  办公地址:上海市嘉定区沪宜公路3163-3199号一楼A区  客服电话:4008708708  |  本公司游戏产品适合18岁以上成年人使用</p>
                <p class="version">2000-2017  国美在线电子商务有限公司版权所有  京公安网备11010502027062  沪ICP备11009419号  沪B2-20120004号</p>
                <div class="credit">
                    <ul class="credits">
                        <li><div class="img xinxi"></div><p>经营性网站备案信息</p></li>
                        <li><div class="img pinjia"></div><p>可信网站信用评价</p></li>
                        <li><div class="img wangzhan"></div><p>诚信网站</p></li>
                        <li><div class="img jingcha"></div><p>朝阳网络警察</p></li>
                        <li><div class="img dajiaping"></div><p>网购大家评</p></li>
                        <li class="change"></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
<script src="js/helloworld.js"></script>
<script>
    var oShowAllAddress=document.querySelector(".show-all-address");
//    oShowAllAddress.addEventListener(`click`,function(){
//        var overflow=fetchComputedStyle(`overflow`);
//    });


    var oFooter = document.querySelector('.footer')
    var oUlHao = document.querySelector('#nihao');
    //加载商品；
    var index = 1;
    window.addEventListener('scroll', function() {
        // e = e || window.event;
        scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        if((getAllTop(oFooter) - scrollTop) < 100) {
            index++;
            if(index < 1)
                myajax.get('http://h6.duchengjiu.top/shop/api_goods.php',{page:index},
                        function(error,responseText)
                {addcont(error,responseText)})
        }
    })
    oShowAllAddress.onclick = function() {
        index++;
        myajax.get('http://h6.duchengjiu.top/shop/api_goods.php',
                {page:index},function(error,responseText)
        {addcont(error,responseText)})
    }
</script>
<!--数据请求-->
<script src="js/myajax.js" charset="utf-8"></script>
<!--运动动画-->
<script src="js/animate.js" charset="utf-8"></script>
<!--返回顶部-->

<script src="js/backtotop.js" charset="utf-8"></script>
<!--搜索栏-->
<script>
    var oSearch = document.querySelector("#search");
    var ohelloworld =document.querySelector("#helloworld");

        ohelloworld.onclick=function(){
            myajax.get("http://h6.duchengjiu.top/shop/api_goods.php",{
                search_text:oSearch.value,
                page:1,
                pagesize:20
            },function(error,responseText){
                var json=JSON.parse(responseText);
                console.log(json)
                location.href = 'html/search.html?'+oSearch.value;

            })
    }
//----------
//var oSearch = document.querySelector("#search");
//    var ohelloworld =document.querySelector("#helloworld");
//    ohelloworld.addEventListener(`click`,search,false);
//
//    oSearch.onkeyup = function(event) {
//        if (event.keyCode === 13) {
//       search()
//        }
//    };
//    function search(){
//        location.href = 'html/search.html?search_text='+oSearch.value;
//    }

</script>
<!--轮播图-->
<script>
    var oCarousel = document.querySelector('#carousel');
    var oLeftBtn = document.querySelector('#leftBtn');
    var oRightBtn = document.querySelector('#rightBtn');
    var oCirclesLi = document.querySelector("#circles").querySelectorAll('li');
    var oMUnit = document.querySelector("#m_unit");
    var oUl = oMUnit.querySelector('ul');
    var oLi = oUl.querySelectorAll('li');

    var imgLength = oLi.length;
    var width = 750;
    var animatetime = 600;
    var tweenString = "SineEaseOut";
    var interval = 1500;
    var lock = true;
    var index = 0; //0 1 2 3 4 5 6 7

    var timer = setInterval(rightBtnHandler, interval);
    oCarousel.onmouseover = function(){
        clearInterval(timer);
    }
    oCarousel.onmouseout = function() {
        timer = setInterval(rightBtnHandler, interval);
    }

    //把0号li克隆，然后添加到carouseUL的最后
    oUl.appendChild(oLi[0].cloneNode(true));

    oRightBtn.onclick = rightBtnHandler;
    oLeftBtn.onclick  = function() {
        if (oMUnit.isAnimated) return;
        index--;
        if (index < 0) {
            index = imgLength - 1;
            oMUnit.style.left = -width * imgLength + 'px';
        }
        changeCircles();
        animate(oMUnit, {"left": -width*index}, animatetime, tweenString);
    }

    for (var i = 0; i < oCirclesLi.length; i++) {
        (function(i){
            oCirclesLi[i].onmouseover = function() {
                if (oMUnit.isAnimated) return;
                index = i;
                changeCircles();
                animate(oMUnit, {"left": -width*index}, animatetime, tweenString);
            }
        })(i);
    }

    function rightBtnHandler() {
        //如果本身在运动，则不做任何事
        if (oMUnit.isAnimated) return;
        index++;
        changeCircles();
        animate(oMUnit, {"left":-width*index}, animatetime, tweenString, function(){
            if (index > imgLength-1) {
                index = 0;
                this.style.left = "0px";
            }
        });
    }

    //更换小圆点
    function changeCircles() {
        //n是信号量的副本
        var n = index;
        if (n === imgLength) {
            n = 0;
        }

        for (var i = 0; i < oCirclesLi.length; i++) {
            oCirclesLi[i].className = "";
        }
        oCirclesLi[n].className = "current";
    }
</script>
<!--用户名-->
<script>
    if(localStorage.username){
        var oUsername=document.querySelector("a[name=username]");
        var oLogout=document.querySelector(".logout");
        oUsername.innerText=localStorage.username;
        oUsername.style.display="inline";
        oLogout.style.display="inline";
    }else {
        var oRegister = document.querySelector('.register');
        var oLogin = document.querySelector('.login');
        oRegister.style.display = 'inline';
        oLogin.style.display = 'inline';
    }
</script>
<script>
    var oUl=document.querySelector("#guomeis");
    myajax.get("http://h6.duchengjiu.top/shop/api_cat.php",{},function(error,responseText){
        var json=JSON.parse(responseText);
        console.log(json);
        var data=json.data;
        for(var i=0;i<data.length;i++){
            var obj=data[i];
            oUl.innerHTML+=`
            <li class="left"><a href="index.html?cat_id=${obj.cat_id}">
            ${obj.cat_name}
            </a>
            </li>`
        }
    })
    //----------------------------------
    function getQueryString(name){
        var search=location.search.substr(1);
        var reg=new RegExp("(^|&)"+name+"=([^&]*)(&|$)");
        var result=search.match(reg);
//        if(result===null) return null;
//        return decodeURIComponent(result[2]);
        //三目用算
        return result===null?null:decodeURIComponent(result[2])
    }
    var cat_id=getQueryString("cat_id");
    //-------------------------------------------------------
    var nihao=document.querySelector("#nihao");
    myajax.get("http://h6.duchengjiu.top/shop/api_goods.php?cat_id="+cat_id,{
        page:1,
        pagesize:10
    },function(error,responseText){
        var json=JSON.parse(responseText);
        console.log(json);
        var data=json.data;
        for(var i=0;i<data.length;i++){
            var obj=data[i];
            nihao.innerHTML+=`
            <li><a href="html/details.html?goods_id=${obj.goods_id}">
            <div class="agrandir"><img src="${obj.goods_thumb}"></div>
            <div class="prix-prix">￥&nbsp;${obj.price}</div>
            <div class="floft-top">
            <div class="calligraphie">${obj.goods_name}</div>
            </div>
            </a>
            </li>
            `
        }

    });

</script>
<!--拉至底部加载数据-->


</html>